<!-- <template>
  <Demo01 :msg1="msg1" :msg2="msg2"></Demo01>
</template>

<script setup>
// import Demo01 from "./components/01-vue3语法范式/Demo01.vue"
// import Demo02 from "./components/01-vue3语法范式/Demo02.vue"
// import Demo03 from "./components/01-vue3语法范式/Demo03.vue"
// import Demo04 from "./components/01-vue3语法范式/Demo04.vue"
// import Demo05 from "./components/01-vue3语法范式/Demo05.vue"

// import Demo01 from "./components/02-compositionAPI/Demo01.vue"

import Demo01 from "./components/03-communication/Demo01.vue"

import {ref,reactive} from "vue"
let msg1 = ref("码路");
let msg2 = reactive(["前端","vue"]);
</script> -->

<!-- ------------------------------------------------------- -->

<!-- <template>
  <Demo02 @myClick="onMyClick"></Demo02>
</template>

<script setup>
import Demo02 from "./components/03-communication/Demo02.vue";

// msg 是子传递给父的数据
const onMyClick = (msg) => {
  console.log("msg:", msg);
};
</script> -->


<!-- ------------------------------------------------------- -->



<template>
  <GoodFilter v-model:shop.sort="shop" v-model:price="price" />
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import GoodFilter from "./components/04-change/Demo02.vue"
const shop = ref([]);
const price = ref(500);

watch([shop, price], () => {
  console.log("changed", shop.value, price.value);
});
</script>





